<template>
  <div id="tmpl">
    <!--商品轮播图  -->
    <slide :images="imglist" class="slide"></slide>
    <div id="buy">
      <h4 v-text="proinfo.title"></h4>
      <p class="line"></p>
      <ul>
        <li class="price">
          市场价:
          <s>&yen;{{proinfo.market_price}}</s> 销售价<span>:&yen;{{proinfo.sell_price}}</span>
        </li>
        <li class="inputli">
          购买数量:
          <inoutnum class="inputnumber" @dataobj="getcount"></inoutnum>
          <transition name="show" @before-enter="beforeEnter" @enter="enter" @after-enter="afterEnter">
            <div class="ball" v-if="isshow"></div>
          </transition> 
        </li>
        <li>
          <mt-button type="primary" size="small">立即购买</mt-button>
          <mt-button type="danger" size="small" v-on:click="toshopcar">加入购物车</mt-button>
        </li>
      </ul>

    </div>
    <div id="params">
      <h6>商品参数</h6>
      <p class="line"></p>
      <ul>
        <li>商品货号:{{proinfo.goods_no}}</li>
        <li>库存情况:{{proinfo.stock_quantity}}</li>
        <li>上架时间:{{proinfo.add_time | datefmt('YYYY-MM-DD')}}</li>
      </ul>
    </div>
    <div id="other">
      <router-link v-bind="{to:'/goods/goodsdesc/'+id}">
        <mt-button class="imgdesc" type="primary" size="large">图文详情</mt-button>
      </router-link>
      <router-link v-bind="{to:'/goods/goodscomment/'+id}">
        <mt-button type="danger" size="large">商品评论</mt-button>
      </router-link>
    </div>
  </div>
</template>
<script>
  import {setItem,valObj} from '../../kits/local.js'
  import {
    vm,
    COUNTSTR
  } from '../../kits/vm.js'
  import inoutnum from '../subcom/inputNum.vue'
  import common from '../../kits/common.js';
  import slide from '../subcom/slide.vue';
  import {
    Toast
  } from 'mint-ui';
  export default {
    components: {
      slide,
      inoutnum
    },
    data() {
      return {
        id: 0,
        imglist: [],
        proinfo: {},
        inputNumberCount: 1,
        isshow:false
      }
    },
    created() {
      this.id = this.$route.params.id;
      this.getimg();
      this.getinfo();
    },
    mounted() {
      var lunbo = document.querySelector('#lunbo');
      // console.log(lunbo);
      lunbo.style.height = '325px';
    },
    methods: {
      getinfo: function () {
        var url = 'http://182.254.146.100:8899/api/goods/getinfo/' + this.id;
        this.$http.get(url).then(function (res) {
          let body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }
          this.proinfo = body.message[0];
        })
      },
      getimg: function () {
        console.log(this.id)
        var url = 'http://182.254.146.100:8899/api/getthumimages/' + this.id;
        this.$http.get(url).then(function (res) {
          // console.log(res)
          var body = res.body;
          if (body.status != 0) {
            Toast(body.message);
            return;
          }
          this.imglist = body.message;
        })
      },
      getcount(count) {
        this.inputNumberCount = count;
      },
      toshopcar() {
        vm.$emit(COUNTSTR, this.inputNumberCount);
        //将数据保存到localStorage
        valObj.goodsid=this.id;
        valObj.goodscount=this.inputNumberCount;
        setItem(valObj);
        //小球的隐藏显示
        this.isshow=!this.isshow;
      },
      beforeEnter(el){
        el.style.transform='translate(0,0)'
      },
      enter(el,done){
        el.offsetWidth;
        el.style.transform='translate(50px,400px)';
        done();
      },
      afterEnter(el){
        this.isshow=!this.isshow;
      }
    }

  }
</script>
<style scoped>
  .mint-swipe {
    height: 300px;
  }

  .slide {
    border: 1px solid rgba(0, 0, 0, .4);
    border-radius: 5px;
    margin: 5px;
  }

  #buy,
  #params {
    margin: 5px;
    padding: 5px;
    border: 1px solid rgba(0, 0, 0, .4);
    border-radius: 5px;
  }

  .line {
    height: 1px;
    border: 1px solid rgba(0, 0, 0, .2);
  }

  #buy h4 {
    color: #0094ff;
  }

  #buy ul,
  #params ul {
    padding-left: 0;
  }

  #buy li,
  #params li {
    list-style: none;
    padding: 8px;
  }

  #buy .price span {
    color: red;
  }

  #other .imgdesc {
    margin-bottom: 20px;
  }

  .inputli {
    position: relative;
  }

  .inputnumber {
    position: absolute;
    left: 100px;
    top: 8px;
  }
  .ball{
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    left:150px;
    top: 10px;
    transition: all 0.5s;
    z-index: 100;
  }
</style>